 
import {useNavigate} from 'react-router-dom' 
import {useState } from 'react'
import {Button} from 'antd'
import './indec.css'
 function Suprise(props){
	var navigate=useNavigate()
	// todoList数组
	// useState 是react的hook 
	// hook 让函数组件 能想class组件一样操作
	var arr=[]
	if(localStorage.todoList){
			arr=JSON.parse(localStorage.todoList)
	}else{
		localStorage.todoList="[]";
	}
	 var [todoList,setTodo]=useState(arr)
	 var [name,setName]=useState("张三")
	 var inpval=""
	 function turn(){
		 // react的编程式跳转 
		 navigate("/cart",{state:111})
	 }
	
	 function addTodo(){ // 添加新的数据到todoList
		 // 调用setTodo方法
		 setTodo([...todoList,{
			 title:inpval,
			 isfinsh:false,
			 id:new Date().getTime()
		 }])
		 localStorage.todoList=JSON.stringify(todoList)
		 setName("李四")
		
	 }
	 function inpChange(e){//收集输入框的值
		 inpval=e.target.value;
	 }
	 function selChange(e){ //未到成数据变为已完成
		 console.log(todoList)
		 console.log(e.target.value)
		 var index=e.target.value;//要改变数据的下标
		 todoList[index].isfinsh=true;
		 setTodo([...todoList])
		  localStorage.todoList=JSON.stringify(todoList)
	 }
	 function cancelChange(e){//已完成回顾到未完成
		 var index=e.target.value;
		 todoList[index].isfinsh=false;
		 setTodo([...todoList])
		localStorage.todoList=JSON.stringify(todoList)
	 }
	 function del(e){ //删除方法
		var id=e.target.getAttribute("pid");
		console.log(id)
		// 通过id 删除数据
		todoList.forEach((item,index)=>{
			if(id==item.id){
				todoList.splice(index,1)
			}
		})
		setTodo([...todoList]);
		localStorage.todoList=JSON.stringify(todoList)
	 }
	 return (
		<div>
			<Button type="primary">antd的按钮</Button>
			<h1>我是惊喜组件</h1>
			<button onClick={turn}>去到购物车组件</button>
			<h1>{name}</h1>
			<div>
				<input type="text" onInput={inpChange}   />	
				<button onClick={addTodo}>添加</button>
			</div>
			<h1>未完成</h1>
			<ul>
			{todoList.map((item,index)=>{
				if(!item.isfinsh){
					return <li key={index} >
						<input onChange={selChange} value={index} checked={item.isfinsh} type="checkbox" /> 
						<span>{item.title}</span>
						<button pid={item.id} onClick={del} >删除</button>
					</li>
				}else{
					return ""
				}
			})}
			</ul>	
			<hr />	
			<h1>已完成</h1>
			<ul>
				{todoList.map((item,index)=>{
					if(item.isfinsh){
						return <li key={index}>
							<input onChange={cancelChange} value={index} checked={item.isfinsh} type="checkbox" /> 
							<span className="del">{item.title}</span>
							<button  pid={item.id} onClick={del}>删除</button>
						</li>
					}else{
						return ""
					}
				})}
			</ul>	
		</div>
	 )
	 
 }
 export default Suprise